<template>
	<view class="gui-relative" style="height:100vh;">
		<view class="gui-margin">
			<view class="hulu-course-card" v-for="(g,ind) in personalcourses" :key="ind" @tap="toDetail(g)">
				<view class="course-lft">
					<view class="lft-img">
						<image :src="g.cover_image" mode="widthFix" style="will-change: transform;"></image>
						<text class="gui-text-center gui-text-small hulu-bg-primary-color1 hulu-primary-color">
							{{g.course_type.name}}
						</text>
						
					</view>

				</view>
				<view class="course-ct">
					<view class="ct-title">
						<text class="ct-name">{{g.name}}</text>
						<view class="ct-ticket">
							<image :src="g.Employee.avatar" mode="widthFix"  class="ct-avatar"
							style="will-change: transform;"></image>
						</view>
					</view>
					
					<view class="ct-tag" v-for="(c,index) in g.coursetarget_ids.slice(0,3)" :key="index">
							<text>{{c}}</text>
					</view>
				</view>
				<view class="course-rgt">
					<view class="rgt-min">
						{{g.duration}}
					</view>
					<view class="">
						min
					</view>
				</view>
			</view>
		</view>
		<view class="" style="height:88rpx;">

		</view>
	</view>
</template>
<script setup lang="ts">
	import { onMounted, ref } from 'vue'
	import usePersonalcourse from '@/api/personalcourse'

	const { personalcourses, getPersonalCourse } = usePersonalcourse()
	getPersonalCourse("");
	const toDetail=(g)=>{
		uni.navigateTo({
			url:`/subpage/personalcourse/index?id=${g.ID}`
		})
	}
</script>

<style scoped lang="scss">
	.custom-style {
		color: white;
		background-color: red;
	}

	.pay-btn {
		height: 180rpx;
		line-height: 180rpx;
		background-color: white;
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		-webkit-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);
		box-shadow: 0px -2px 12px 0px rgba(0, 0, 0, 0.2);

		.pay-btn-warp {
			padding: 0 30rpx;
			width: 700rpx;
		}
	}
	.ct-avatar{
		width:88rpx;
		// border-radius: 50%;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
		position: relative;
		border-width: 4rpx;
		border-style: solid;
		border-color: white;
		border-radius: 50%;
	}
</style>